<script setup>
import { ref } from 'vue';
import { Layout, Menu, Avatar, Divider } from 'ant-design-vue';
import { UserOutlined } from '@ant-design/icons-vue';
import logo from "@/assets/logo.png";

const selectedKey = ref('home');
</script>

<template>
  <a-layout-header class="header">
    <!-- 左侧 Logo 和标题 -->
    <div class="logo">
      <span class="logo-icon">M</span>
      <span class="logo-title">AntMotion</span>
    </div>

    <!-- 中间的导航菜单 -->
    <a-menu mode="horizontal" :selected-keys="[selectedKey]" theme="dark" class="menu">
      <a-menu-item key="home">首页</a-menu-item>
      <a-menu-item key="job">招聘职位</a-menu-item>
      <a-menu-item key="connection">链接</a-menu-item>
      <a-menu-item key="forum">论坛咨询</a-menu-item>
      <Divider type="vertical" />
      <a-menu-item key="messageInput">消息</a-menu-item>
    </a-menu>

    <!-- 右侧用户头像 -->
    <a-avatar class="user-avatar" size="large" icon="<UserOutlined />" />
  </a-layout-header>
</template>

<style scoped>
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #002766;
  padding: 0 24px;
  color: #ffffff;
}

.logo {
  display: flex;
  align-items: center;
  color: #ffffff;
  font-size: 20px;
}

.logo-icon {
  font-weight: bold;
  font-size: 28px;
  color: #1890ff;
  margin-right: 8px;
}

.logo-title {
  font-size: 18px;
  font-weight: bold;
}

.menu {
  flex: 1;
  margin-left: 40px;
}

.menu .ant-menu-item {
  color: #ffffff;
}

.menu .ant-menu-item:hover,
.menu .ant-menu-item-active,
.menu .ant-menu-item-selected {
  color: #1890ff;
  background-color: transparent;
}

.user-avatar {
  background-color: #1890ff;
}
</style>
